import React from 'react';
import { Icon, Button, Row, Card, Col, Input, Select, DatePicker } from 'antd';
import Form, { FormComponentProps } from 'antd/lib/form';
import { connect } from 'dva';
import { threeColumnsLayout, formItemLayout } from '@/common/layout/form';
import { Advertise } from '../model';

const { Option } = Select;

// 表单Title
const FormTitle: React.FC = () => (
  <div>
    <Icon type="search" />
    <span style={{ marginLeft: '5px' }}>筛选搜索</span>
  </div>
);

interface ExtraButtonGroupProps {
  onSearch: () => void;
  onReset: (names?: Array<string>) => void;
}

// 表单右上角按钮组
const ExtraButtonGroup: React.FC<ExtraButtonGroupProps> = props => (
  <div className="horizon-button-group-reverse">
    <Button onClick={() => props.onReset()}>重置</Button>
    <Button onClick={props.onSearch} type="primary">
      查询结果
    </Button>
  </div>
);

interface SearchFormProps extends FormComponentProps {
  onSearch: () => void;
}

// eslint-disable-next-line react/prefer-stateless-function
class SearchForm extends React.Component<SearchFormProps> {
  render() {
    const { form, onSearch } = this.props;
    const { getFieldDecorator, resetFields } = form;

    return (
      <Card
        title={<FormTitle />}
        extra={<ExtraButtonGroup onReset={resetFields} onSearch={onSearch} />}
      >
        <Form layout="horizontal" hideRequiredMark>
          <Row gutter={16}>
            <Col {...threeColumnsLayout}>
              <Form.Item {...formItemLayout} label="广告名称">
                {getFieldDecorator<Advertise>('name')(<Input placeholder="广告名称" />)}
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
    );
  }
}

export default connect()(Form.create<SearchFormProps>()(SearchForm));
